<!doctype html>
<html lang="en" ng-app="PWDLanding" ng-controller="LoginController">
  <head>
    <script src="https://unpkg.com/angular@1.6.6/angular.min.js"></script>
    <script src="https://unpkg.com/angular-cookies@1.6.6/angular-cookies.min.js"></script>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="description" content="" />
    <meta name="author" content="" />

    <title>Play with Kubernetes</title>

    <!-- Bootstrap core CSS -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/bootstrap@4.0.0-beta/dist/css/bootstrap.min.css"
      integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"
      crossorigin="anonymous"
    />

    <!-- Custom styles for this template -->
    <link href="/assets/landing.css" rel="stylesheet" />
  </head>

  <body>
    <div class="container">
      <div class="header clearfix">
        <nav>
          <ul class="nav nav-pills float-right">
            <li class="nav-item">
              <a
                class="nav-link"
                href="https://github.com/play-with-docker/play-with-docker"
                >Contribute</a
              >
            </li>
          </ul>
        </nav>
      </div>

      <div class="jumbotron" ng-cloak>
        <img src="https://avatars.githubusercontent.com/u/13629408?v=4" />
        <h1 class="display-3">Play with Kubernetes</h1>
        <p class="lead">
          A simple, interactive and fun playground to learn Kubernetes
        </p>
        <div ng-hide="loggedIn" class="btn-group" role="group">
          <button
            id="btnGroupDrop1"
            type="button"
            class="btn btn-primary dropdown-toggle"
            data-toggle="dropdown"
            aria-haspopup="true"
            aria-expanded="false"
          >
            Login
          </button>
          <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
            <a
              ng-repeat="provider in providers"
              class="dropdown-item"
              ng-click="login(provider)"
              >{{provider}}</a
            >
          </div>
        </div>
        <form id="landingForm" method="POST" action="/">
          <p ng-show="loggedIn">
            <a
              class="btn btn-lg btn-success"
              href="#"
              ng-click="start()"
              role="button"
              >Start</a
            >
          </p>
          <input id="stack" type="hidden" name="stack" value="" />
          <input id="stack_name" type="hidden" name="stack_name" value="" />
          <input id="image_name" type="hidden" name="image_name" value="" />
        </form>
      </div>

      <div class="row marketing">
        <div class="col-lg-12">
          <p>
            Play with Kubernetes is a labs site provided by
            <a href="https://docker.com">Docker</a> and created by Tutorius.
            Play with Kubernetes is a playground which allows users to run K8s
            clusters in a matter of seconds. It gives the experience of having a
            free Alpine Linux Virtual Machine in browser. Under the hood
            Docker-in-Docker (DinD) is used to give the effect of multiple
            VMs/PCs.
          </p>
          <p>
            If you want to learn more about Kubernetes, consider the
            <a href="https://training.play-with-kubernetes.com/"
              >Play with Kubernetes Classroom</a
            >
            which provides more directed learning using an integrated Play with
            Kubernetes commandline.
          </p>
        </div>
      </div>

      <footer class="footer">
        <p>&copy; Play with Kubernetes 2017 - 2023</p>
      </footer>
    </div>

    <script
      crossorigin="anonymous"
      src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
      integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
      crossorigin="anonymous"
    ></script>
    <script
      crossorigin="anonymous"
      src="https://unpkg.com/popper.js@1.11.0/dist/umd/popper.min.js"
      integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
      crossorigin="anonymous"
    ></script>
    <script
      crossorigin="anonymous"
      src="https://unpkg.com/bootstrap@4.0.0-beta/dist/js/bootstrap.min.js"
      integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
      crossorigin="anonymous"
    ></script>
    <script>
    angular.module("PWDLanding", []).controller("LoginController", [
      "$scope",
      "$http",
      "$window",
      function ($scope, $http, $window) {
        $scope.providers = [];
        $scope.loggedIn = false;
        $scope.user = null;

        function checkLoggedIn() {
          $http({
            method: "GET",
            url: "/users/me",
          }).then(
            function (response) {
              $scope.user = response.data;
              $scope.loggedIn = true;
            },
            function (response) {
              $scope.user = null;
              $scope.loggedIn = false;
            },
          );
        }

        checkLoggedIn();

        $http({
          method: "GET",
          url: "/oauth/providers",
        }).then(
          function (response) {
            $scope.providers = response.data;
            if ($scope.providers.length == 0) {
              $scope.loggedIn = true;
            }
          },
          function (response) {
            console.log("ERROR", response);
          },
        );

        $scope.login = function (provider) {
          var width = screen.width * 0.6;
          // fixed height as the login window is not responsive
          var height = 620;
          var x = screen.width / 2 - width / 2;
          var y = screen.height / 2 - height / 2;
          $window.open(
            "/oauth/providers/" + provider + "/login",
            "PWDLogin",
            "width=" + width + ",height=" + height + ",left=" + x + ",top=" + y,
          );
          var eventMethod = window.addEventListener
            ? "addEventListener"
            : "attachEvent";
          var eventer = window[eventMethod];
          var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
          // Listen to message from child window
          eventer(
            messageEvent,
            function (e) {
              if (e.data === "done") {
                checkLoggedIn();
              }
            },
            false,
          );
        };

        $scope.start = function () {
          function getParameterByName(name, url) {
            if (!url) url = window.location.href;
            name = name.replace(/[\[\]]/g, "\\$&");
            var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
              results = regex.exec(url);
            if (!results) return null;
            if (!results[2]) return "";
            return decodeURIComponent(results[2].replace(/\+/g, " "));
          }

          var stack = getParameterByName("stack");
          if (stack) {
            document.getElementById("stack").value = stack;
          }
          var stackName = getParameterByName("stack_name");
          if (stackName) {
            document.getElementById("stack_name").value = stackName;
          }
          var imageName = getParameterByName("image_name");
          if (imageName) {
            document.getElementById("image_name").value = imageName;
          }
          document.getElementById("landingForm").submit();
        };
      },
    ]);
</script>
  </body>
</html>
